Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add canvas feature renderer #2671

Draft
wants to merge 41 commits into
base: main
Choose a base branch
from
Draft

Conversation

cmdcolin
Copy link
Collaborator

@cmdcolin cmdcolin commented Jan 24, 2022

This is a draft PR for canvas feature rendering

I am observing that SVG feature rendering is pretty slow in some cases especially if we are moderately zoomed out. the process of creating a react component for every subfeature, with config callbacks, color emphasize routines, is labor intensive, and bloats the dom node count, and it runs basically the full render on both the worker (ssr) and client thread (hydrate also does a full render).

Also this PR has floating feature labels which is a good benefit.

Some todos include just a general code review and adding UTR

Fixes #674

Use color

Box glyph

Misc

Back to main

updates

Updates

Incremental

Canvas glyph types

Misc

Label

Remove updateStaticElement

Correct positioning

Start rendering text

System for rendering labels at proper place

Crazy code

Misc

Updates

Testing
@github-actions github-actions bot added the needs label triage Needs a label to show in changelog (breaking, enhancement, bug, documentation, or internal) label Jan 24, 2022
@cmdcolin
Copy link
Collaborator Author

one concern that could be brought up is that some users have created infrastructure around svg being the default renderer. possibly, in that case, we would need to fork stuff in a (very) similar way to jbrowse 1 and make a CanvasFeatures track and an SvgFeatures track, which FeatureTrack being the default with svg renderer.

@cmdcolin cmdcolin added enhancement New feature or request and removed needs label triage Needs a label to show in changelog (breaking, enhancement, bug, documentation, or internal) labels Jan 24, 2022
@cmdcolin
Copy link
Collaborator Author

just for the record, this is definitely way faster === more pleasant to use imo. if there are considerations before pushing forward on this, feel free to add, but could be worth pushing over the finish line

@rbuels
Copy link
Contributor

rbuels commented Jan 26, 2022

from meeting just now, thinking about how to allow pluggable Glyphs.

two ways of doing this I can think of:

  1. add a pluggable element type called a CanvasFeatureGlyphType, add it to the plugin manager, etc.
  2. add an extension point called CanvasFeatures-chooseGlyph that lets people modify the code that chooses what glyph class to use

@garrettjstevens
Copy link
Collaborator

garrettjstevens commented Jul 24, 2023

@thomasvangurp Many of the JBrowse 1 CanvasFeatures renderer features are already available in our SvgFeatureRenderer in JBrowse 2. For example, here is a link to a JBrowse 2 session with an example of a track like the ChromHMM track you linked:

https://s3.amazonaws.com/jbrowse.org/code/jb2/main/index.html?config=test_data%2Fvolvox%2Fconfig.json&session=share-_dSWmP49dR&password=vGe4g.

Also, here is the configuration for that track:

{
  "type": "FeatureTrack",
  "trackId": "chromhmm",
  "name": "ChromHMM",
  "assemblyNames": [
    "volvox"
  ],
  "adapter": {
    "type": "BedAdapter",
    "bedLocation": {
      "locationType": "UriLocation",
      "uri": "https://s3.amazonaws.com/jbrowse.org/code/JBrowse-1.16.11/sample_data/raw/volvox/volvox_segment.bed"
    }
  },
  "displays": [
    {
      "type": "LinearBasicDisplay",
      "displayId": "chromhmm-LinearBasicDisplay",
      "renderer": {
        "type": "SvgFeatureRenderer",
        "color1": "jexl:get(feature,'name')=='1_TssA'?'red':get(feature,'name')=='2_TssAFlnk'?'pink':get(feature,'name')=='3_TxFlnk'?'purple':get(feature,'name')=='4_Tx'?'orange':get(feature,'name')=='5_TxWk'?'darkorange':get(feature,'name')=='6_EnhG'?'yellow':get(feature,'name')=='7_Enh'?'gold':get(feature,'name')=='8_ZNFRpts'?'blue':get(feature,'name')=='9_Het'?'darkgreen':get(feature,'name')=='10_TssBiv'?'green':get(feature,'name')=='11_BivFlnk'?'lightgreen':get(feature,'name')=='12_EnhBiv'?'purple':get(feature,'name')=='13_ReprPC'?'lightblue':get(feature,'name')=='14_ReprPCWk'?'salmon':get(feature,'name')=='15_Quies'?'lightgrey':black",
        "labels": {
          "name": ""
        },
        "displayMode": "collapse"
      }
    }
  ]
}

Misc

Update snaps

Collapse intron p1

Properly size linear genome view after creation

Bump deps
@cmdcolin
Copy link
Collaborator Author

attempting to push this PR forward a bit, still wip but some updates

floating labels

This PR changes it so that all the labels are rendered separately from the features at the display level, aggregating across a variable called display.layoutFeatures

I made it so that the "floating labels" rendering is moved to what I might call a more "principled" approach

The current feature label rendering is done on a block by block basis, with a fair number of hacks to make it stay on the screen in a "floating way"

this separated rendering also makes font rendering separate from feature drawing, which allows us to use plain html divs for text rendering, which is generally looks better and less pixelated than canvas font rendering

collapsed introns

some motivation with the above floating label refactoring is that "collapsed intron" display is handled better. previously, the label rendering in "collapsed intron" scenarios (which have many displayedRegion boundaries) was glitchy. now pretty much seemless

main branch
https://jbrowse.org/code/jb2/main/?config=test_data%2Fconfig_demo.json&session=share-U3J3bEP-aC&password=ijHd0

this branch
https://jbrowse.org/code/jb2/add_canvas_feature_renderer/?config=test_data%2Fconfig_demo.json&session=share-U3J3bEP-aC&password=ijHd0

large region

when rendering large amounts of genes, the canvas renderer should be much faster and noticeably less laggy

main branch
https://jbrowse.org/code/jb2/main/?config=test_data%2Fconfig_demo.json&session=share-RuR3oRl-1K&password=ZbPd3

this branch
https://jbrowse.org/code/jb2/add_canvas_feature_renderer/?config=test_data%2Fconfig_demo.json&session=share-RuR3oRl-1K&password=ZbPd3

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Make new CanvasFeatureRenderer
4 participants